<template>
    <view class="page">
			<view class="bigDiv">
				<view class="header">
					取快递
				</view>
				<view class="">
					快递大小
				</view>
				<view class="betweendiv">
					<view   v-for="(size, index) in sizes" 
                    :key="index" 
                    class="smalldiv" 
                    :class="{ 'selected': selectedSize === index }" 
                    @click="selectSize(index)">
						{{size}}
				</view>
			</view>
			
			<view class="inputadd">
				<view class="inputStyle">
					<view class="text">
						收件地址：
					</view>
					<view class="input">
						<input type="text" name="" id="" placeholder="请输入你的地址">
					</view>
					
				</view>
				<view class="inputStyle">
					<view class="text">
						快递商家：
					</view>
					<view class="input">
						<input type="text" name="" id="" placeholder="请选择快递点">
					</view>
					
				</view>
				<view class="inputStyle">
					<view class="text">
						取件信息：
					</view>	
				</view>
				<view class="kuang">
					<textarea name="" id="" cols="30" rows="10" placeholder="输入取件码"></textarea>
				</view>
				<view class="inputStyle">
					<view class="text">
						备注信息：
					</view>
					<view class="input">
						<input type="text" name="" id="" placeholder="所有人可见">
					</view>
					
				</view>
				<view class="inputStyle">
					<view class="text">
						更多选择：
					</view>
					<view class="input">
						<view class="showButton" @click="showView" v-if="show == true" >
						    隐藏
						</view>
						<view class="showButton" @click="showView" v-else>
						    显示
						</view>
						<view class="more-form" v-if="show == true">
						    <view>
						        <input type="text" placeholder="请输入">
						    </view>
						    <view>
						        <input type="text" placeholder="请输入">
						    </view>
						    <!-- switch 开关按钮控制 加急悬赏输入框的显示和隐藏 -->
						    <view>
						        <switch :checked="showMoreMoney" @change="changeSwitch"></switch>
						    </view>
						    <!-- 加急悬赏输入框 -->
						    <view class="more-money" v-if="showMoreMoney">
						        <input type="text" placeholder="请输入额外赏金">
						    </view>
					</view>
					
				</view>
			</view>
			</view>
			<view class="text1">
				信息仅接单的同学可见，安全放心
			</view>
			<view class="hou">
				需支付
				<view class="put">
					<input type="text" />
				</view>
			</view>
			<view class="zui">
				立即发布
			</view>

        <view class="text2">
        	免责声明  用户条款&隐私政策
        </view>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
				selectedSize: null,  // 新增一个数据属性来跟踪选中的大小
				sizes: ['小件', '中件', '大件'],  // 新增一个数组来存储大小选项
                show:false,
                showMoreMoney:false
				
            };
        },
        methods:{
			
			selectSize(index) {
			    this.selectedSize = index;  // 更新选中的大小
			},
            showView(){
                console.log(77);
                this.show = !this.show
            },
            changeSwitch(e){
                this.showMoreMoney = e.detail.value
            }
        }
    }
</script>

<style lang="scss" scoped>
.page {
    padding: 20rpx;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
	.bigDiv{
		width: 90%;
		margin: 0 auto;
		height: 90%;
		padding: 10px;
		box-shadow: 1px 1px 5px black;
		border-radius: 15px;
		.header{
			font-size: 12px;
			text-align: center;
			color: #81a2d3;
		}
		.betweendiv{
			display: flex;
			justify-content: space-between;
			.smalldiv{
				width: 50px;
				height: 30px;
				border: 2px solid #dedede;
				border-radius: 5px;
				line-height: 30px;
				text-align: center;
				color:#dedede ;
				margin-top: 8px;
				 &.selected {  // 当smalldiv被选中时应用的样式
				    border: 2px solid #81a2d3;  // 你可以根据需要修改这个颜色
					color: #81a2d3;  // 文本颜色也可以根据需要修改
				}
			}
		}
	}
	.inputadd{
		margin-top: 10px;
		
		.inputStyle{
			display: flex;
			justify-content: space-between;
			padding: 10px 0;
			border-bottom: 1px solid #dedede;
			.input{
				text-align: right;
				width: 140px;
				font-size: 13px;
			}
		}
		.kuang{
			margin-top: 10px;
			border: 2px solid #dedede;
			border-radius: 10px;
			padding: 5px 0 0 5px;
		}
	}
	.text1{
		font-size: 13px;
		text-align: center;
		color: #cfcfcf;
	}
	.text2{
		font-size: 13px;
		text-align: center;
		color:#5d85bd;
	}
	.hou{
		text-align: center;
		margin-top: 10px;
		.put{
			justify-content: center;
		}
	}
	.zui{
		width:90% ;
		height: 50px;
		border-radius: 20px;
		background-color: #1067d1;
		line-height: 50px;
		text-align: center;
		margin: 0 auto;
		margin-top: 20px;
		color: white;
		
	}
    .showButton {
        width: 80rpx;
        height: 40rpx;
        padding: 10rpx;
    }
    .more-form {
        input {
            width: 90%;
            margin: 10rpx auto;
            border: 1rpx solid #999;
        }
        .more-money {
            
        }
    }

}
</style>
